import { doRobotBasicEdit, fetchRobotBasicInfo } from "@/services/robotManagement";
import { Button, Divider, Form, Input, InputNumber, Select, Switch, Tooltip, message,Icon } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class RobotBasicSetting extends React.Component {
  childRef = React.createRef(); 
  constructor(props) {
    super(props)
    this.state = {
      detail: {},
      defaultPrompt:'',
      defaultPromptSetting:''
    }
  }

  componentDidMount() {
    this.getBasicInfo()
  }

  getBasicInfo = async () => {
    const { applicationId } = this.props;
    const res = await fetchRobotBasicInfo({ applicationId });
    this.props.form.setFieldsValue({
      nick:res.nick,
      timeOut:res.timeOut,
      helpful:res.helpful,
      prompt:res.prompt,
      promptSetting:res.promptSetting,
    });
    this.setState({ 
      detail: res,
      defaultPrompt:res.defaultPrompt,
      defaultPromptSetting:res.defaultPromptSetting
     }, () => {
      if (res.delayedReply) {
        this.props.form.setFieldsValue({ delayedReplyTime: res.delayedReplyTime })
      }
    })
  }

  doSaveForm = () => {
    const { detail } = this.state;
    this.props.form.validateFields(async (errors, values) => {
      if (!errors) {
        let obj = { ...values, id: detail.id };
        const res = await doRobotBasicEdit(obj);
        message.info(res.message);
      }
    })
  }

  restoreDefault = (flag,defaultFlag) => {
    this.props.form.setFieldsValue({
      [flag]:this.state[defaultFlag]
    })
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
    };
    const tipsStyle = {
      color: '#999999',
      fontSize: '12px',
    };
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { applicationId, moduleList } = this.props;
    const renderLabel = (label,tips) => (
      <label style={{position:"relative"}}>
        <Tooltip title={tips}>
          <span>{label}<Icon type="question-circle-o" style={{marginLeft:2}} /></span>
        </Tooltip>
      </label>
      
    )
    return (
      <div>
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: 'robotManagement.robotSetting.basicSetting.robotNicknameLabel' })}>
            {getFieldDecorator("nick", { rules: [{ required: true, message: formatMessage({ id: 'robotManagement.robotSetting.basicSetting.robotNicknameRequired' })}] })(
              <Input placeholder={formatMessage({ id: 'robotManagement.robotSetting.basicSetting.robotNicknamePlaceholder' })} style={{ width: 300, marginRight: 10 }} maxLength={8} />
            )}
            {/* <span style={tipsStyle}>{formatMessage({ id: 'robotManagement.robotSetting.basicSetting.channelInvalidTip' })}</span> */}
          </Form.Item>
          {moduleList.indexOf("kefu") > -1 ? null : (
            <Form.Item label={renderLabel(formatMessage({ id: 'robotManagement.robotSetting.basicSetting.timeoutLabel' }), formatMessage({ id: 'robotManagement.robotSetting.basicSetting.timeoutTooltip' }))}>
              {getFieldDecorator('timeOut', { initialValue: 5 })(<InputNumber min={1} precision={0} />)}
              <span style={{ margin: '0 10px 0 5px' }}>{formatMessage({ id: 'robotManagement.robotSetting.basicSetting.minuteUnit' })}</span>
            </Form.Item>
          )}
          <Form.Item label={formatMessage({ id: 'robotManagement.robotSetting.basicSetting.feedbackLabel' })}>
            {
              getFieldDecorator("helpful", { valuePropName: 'checked' })(
                <Switch />
              )
            }
          </Form.Item>
          <Divider style={{ marginTop: 0 }} />
          <Form.Item label={renderLabel(formatMessage({ id: 'robotManagement.robotSetting.basicSetting.roleDefinitionLabel' }), formatMessage({ id: 'robotManagement.robotSetting.basicSetting.roleDefinitionTooltip' }))} style={{position:"relative"}}>
            {
              getFieldDecorator("prompt", { rules: [{ required: true, message: formatMessage({ id: 'robotManagement.robotSetting.basicSetting.roleDefinitionRequired' })}]})(
                <Input.TextArea placeholder={formatMessage({ id: 'robotManagement.robotSetting.basicSetting.roleDefinitionPlaceholder' })} style={{ width: 600,resize:'none'}} maxLength={4000} rows={5} />
              )
            }
            <Button type="link" size="small" style={{position:"absolute",top:-50,left:-120}} onClick={() => this.restoreDefault('prompt','defaultPrompt')}>{formatMessage({ id: 'robotManagement.robotSetting.basicSetting.restoreDefault' })}</Button>
          </Form.Item>
          <Form.Item label={renderLabel(formatMessage({ id: 'robotManagement.robotSetting.basicSetting.ragPromptLabel' }), formatMessage({ id: 'robotManagement.robotSetting.basicSetting.ragPromptTooltip' }))} style={{position:"relative"}}>
            {
              getFieldDecorator("promptSetting", { rules: [{ required: true, message: formatMessage({ id: 'robotManagement.robotSetting.basicSetting.ragPromptRequired' })}]})(
                <Input.TextArea placeholder={formatMessage({ id: 'robotManagement.robotSetting.basicSetting.ragPromptPlaceholder' })} style={{ width: 600,resize:'none'}} maxLength={4000} rows={10} />
              )
            }
            <Button type="link" size="small" style={{position:"absolute",top:-150,left:-120}} onClick={() => this.restoreDefault('promptSetting','defaultPromptSetting')}>{formatMessage({ id: 'robotManagement.robotSetting.basicSetting.restoreDefault' })}</Button>
          </Form.Item>
          <Divider style={{ marginTop: 0 }} />
          <Form.Item colon={false} style={{ textAlign: 'right' }} label={<Button type="primary" onClick={this.doSaveForm}>{formatMessage({ id: 'robotManagement.robotSetting.basicSetting.save' })}</Button>}></Form.Item>
        </Form>
      </div>
    )
  }
}

export default Form.create()(RobotBasicSetting)